<template>
    <div id="login">
      <div class="tourse">
        <a-button type="link" @click="login">账号密码登录</a-button>
        <a-button type="link" @click="goRegister">去注册</a-button>
        <Tourse></Tourse>
      </div>
      <div class="login_box">
        <div class="left_login_img">
          <img src="/assets/image/login.png" alt="" />
        </div>
        <div class="right_login_form_box">
          <div class="form_title">
            <div>找回密码</div>
          </div>
          <div class="login_form">
            <a-form
              ref="formRef"
              :model="formState"
              :label-col="{ span: 0 }"
              :wrapper-col="{ span: 24 }"
              @finish="loginButtonClicked"
              :rules="rules"
            >
              <a-form-item name="mobile_phone">
                <a-input
                  class="large_height"
                  v-model:value="formState.mobile_phone"
                  placeholder="请输入账号"
                  style="width: 360px"
                  autocomplete="mobile_phone"
                >
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
                <a-button type="primary" html-type="submit" class="large_height" style="width: 360px">获取验证码</a-button>
              </a-form-item>
            </a-form>
  
  
            <div class="additional_info">
              <!-- <button @click="showFreeAccountInfo">免费账号</button>
              <button @click="forgetPwd">忘记密码</button> -->
            </div>
            <div id="message">{{ errorMessage }}</div>
          </div>
        </div>
      </div>
      <div class="company_inf">Copyright ©2024 陈维龙毕业设计</div>
    </div>
  </template>
  <script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue';
  import { codelogin, getUserInfo } from '@/api/user';
  import { message } from 'ant-design-vue';
  import store from '@/stores';
  const visible = ref<Boolean>(false);
  interface FormState {
    mobile_phone: string;
  }
  const formRef = ref();
  const router = useRouter();
  const formState = reactive<FormState>({
    mobile_phone: '',
  });
  const rules = reactive({
    mobile_phone: [{ required: true, message: '请输入手机号', type:"string" }],
  });
  
  const userLogin = async (mobile_phone: string): Promise<void> => {
      let res = await codelogin(mobile_phone);
      console.log(res)
      if (res.code === 10000) {
        message.success('请查看手机验证码');
        router.push({ path: '/retpwdvif' });
      } else{
        showError(res.message);
        throw new Error(res.message)
      }
  };
  
  
  const loginButtonClicked = async (values: any) => {
    const res = await userLogin(values.mobile_phone);
    if(res.code === 10000){
    router.push({ path: '/retpwdvif' });
    }else{
      router.push({ path: '/retpwd' })
    }
  };
  
  const login = () =>{
    router.push({path: '/login'})
  }
  
  const goRegister = () =>{
    router.push({path: '/register'})
  }
  
  function showError(errorMessage: string) {
    const messageElement = document.getElementById('message');
    if (messageElement) {
      messageElement.innerText = errorMessage;
      messageElement.style.color = 'red'; // 设置错误信息颜色为红色
      messageElement.style.display = 'block';
    }
  }
  
  </script>
  <style lang="scss" scoped>
  @import './retpwd.scss';
  
  .fold_info {
    // display: flex;
    // justify-content: space-around;
    // font-weight: 700;
    color: black;
  }
  
  .selectable-span {
    cursor: text;
    /* 鼠标光标设置为文本光标 */
    user-select: text;
    /* 允许用户选中元素中的内容 */
  }
  </style>
  